<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div style="margin-top: 20px;">

    <div class="search_block">
        搜索：
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_orderCode" name="s_orderCode"  placeholder="订单号" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_sampleCode" name="s_sampleCode"  placeholder="产品编号" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_sampleName" name="s_sampleName"  placeholder="产品名" autocomplete="off">
            </div>
        </div>
        按出货日期:
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_predate" name="s_predate"  placeholder="从.." autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input class="layui-input" id="s_enddate" name="s_enddate"  placeholder="到.." autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" id="search_btn" data-type="search">搜索</button>
                <label class="tip">${stateMsg}</label>
            </div>
        </div>
    </div>

    <table class="layui-hide" id="orderItems_table" lay-filter="orderItems_table"></table>

    <script type="text/html" id="finishbox">
        <input type="checkbox" name="lock" value="{{d.id}}" title="是" lay-filter="finish" {{ d.isfinish == true?'checked' : '' }}>
    </script>
    <script type="text/html" id="outbox">
        <input type="checkbox" name="lock" value="{{d.id}}" title="是" lay-filter="out" {{ d.isout == true?'checked' : '' }}>
    </script>
    <script type="text/html" id="paybox">
        <input type="checkbox" name="lock" value="{{d.id}}" title="是" lay-filter="pay" {{ d.ispay == true?'checked' : '' }}>
    </script>
    <%--操作条--%>
    <script type="text/html" id="tool_bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑信息</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        var util;
        layui.use(['form', 'laydate','table','layer','util'],function () {
            var form = layui.form,
                laydate=layui.laydate,
                table = layui.table,
                layer=layui.layer,
                $=layui.jquery;
                util=layui.util;
            laydate.render({
                elem:'#s_predate'
            });
            laydate.render({
                elem:'#s_enddate'
            });
            laydate.render({
                elem:'#outdate'
            });
            form.verify({
                workerId:function (value) {
                    if(value.length<6){
                        return '工号不符合规则';
                    }
                },
                name:function (value) {
                    if(value==""){
                        return '姓名不能为空';
                    }
                }
            });
            form.on('submit(check)', function(data){
                return true;
            });
            form.on('checkbox(finish)', function(data){
                    $.post('${pageContext.request.contextPath}/back/orderitem/modifyfinish',{id:data.value,state:data.elem.checked},function (state) {
                       var result=eval('('+state+')');
                       if(result){
                           layer.msg("修改成功");
                           table.reload('id');
                       }else{
                           layer.msg("修改失败");
                       }
                   })
            });
            form.on('checkbox(out)', function(data){
                    $.post('${pageContext.request.contextPath}/back/orderitem/modifyout',{id:data.value,state:data.elem.checked},function (state) {
                        var result=eval('('+state+')');
                        if(result){
                            layer.msg("修改成功");
                            table.reload('id');
                        }else{
                            layer.msg("修改失败");
                        }
                    })
            });
            form.on('checkbox(pay)', function(data){
                    $.post('${pageContext.request.contextPath}/back/orderitem/modifypay',{id:data.value,state:data.elem.checked},function (state) {
                        var result=eval('('+state+')');
                        if(result){
                            layer.msg("修改成功");
                            table.reload('id');
                        }else{
                            layer.msg("修改失败");
                        }
                    })
            });

            table.render({
                elem: '#orderItems_table'
                ,even:true
                ,url:'/back/orderitem/load'
                ,cols: [[
                    {field:'order', width:80, title: '订单号' ,sort: true,templet: '#orderTpl'}
                    ,{field:'sample',width:150,title:'产品',sort:true,templet: '#sampleTpl'}
                    ,{field:'outdate',width:120, title: '出货日期',templet: '#timeTpl',sort:true}
                    ,{field:'remark', title: '备注'}
                    ,{field:'price',width:80,title:'单价',sort:true}
                    ,{field:'count',width:80,title:'数量',sort:true}
                    ,{field:'total',width:80,title:'总金额',sort:true}
                    ,{field:'isfinish',width:100,title:'完成？',sort:true,templet: '#finishbox'}
                    ,{field:'isout',width:100,title:'出货？',sort:true,templet: '#outbox'}
                    ,{field:'ispay',width:100,title:'收款？',sort:true,templet: '#paybox'}
                    ,{fixed: 'right',title:'操作', width:150, align:'center', toolbar: '#tool_bar'}
                ]]
                ,done:function () {
                }
                ,id:'id'
                ,page: true
                ,limit:10
            });


            //操作按钮监听模块
            table.on('tool(orderItems_table)',function (obj) {
                var data=obj.data;
                var event=obj.event;

                if(event=='items'){
                    layer.open({
                        type: 2,
                        title:'个人信息',
                        skin: 'layui-layer-lan',
                        area:['1200px','680px'],
                        content: ["${pageContext.request.contextPath}/back/orderitem/byorder/list/"+data.id+"/"+data.code,'no'],
                        btn:'关闭页面',
                        yes:function (index) {
                            // layer.close(index);
                            location.reload();
                        }
                    });
                }

                if(event=='del'){
                    layer.confirm('要删除该订单详情项?', function(index){
                        $.post("${pageContext.request.contextPath}/back/orderitem/delete",{id:data.id},function (state) {
                            var result=eval('('+state+')');
                            if(result){
                                layer.msg("删除成功");
                                obj.del();
                                layer.close(index);
                            }else{
                                layer.msg("删除失败");
                                layer.close(index);
                            }
                        });

                    });
                }
                if(event=='edit'){
                    layer.open({
                        title:'修改页面'
                        ,type: 1
                        ,skin: 'layui-layer-lan'
                        ,area: ['420px','600px']
                        , content: $('#addOrderItem_form')
                        ,success: function(layero, index){
                            $('#addOrderItem_form').attr('action','${pageContext.request.contextPath}/back/orderitem/modifyInfo');
                            $('#id').val(data.id);
                            $('#order').val(data.order.id);
                            $('#sample').find("option[value ='"+data.sample.id+"']").prop("selected","selected");
                            $('#price').val(data.price);
                            $('#count').val(data.count);
                            $('#total').val(data.total);
                            $('#outdate').val(timeFormat(data.outdate));
                            $('#remark').val(data.remark);
                            $('#btn').text("提交修改");
                            form.render();
                        }
                    });
                }
            });

            //搜索添加模块
            var $ = layui.$, active = {
                search: function(){
                    var s_orderCode=$('#s_orderCode').val();
                    var s_sampleName = $('#s_sampleName').val();
                    var s_sampleCode=$('#s_sampleCode').val();
                    var s_predate=$('#s_predate').val();
                    var s_enddate=$('#s_enddate').val();
                    table.reload('id', {
                        where: {
                            s_orderCode:s_orderCode,
                            s_sampleName:s_sampleName,
                            s_sampleCode:s_sampleCode,
                            s_predate:s_predate,
                            s_enddate:s_enddate
                        }
                        ,page: {
                            curr:1
                        }

                    });
                }

            };

            $('#search_btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });

        //表格日期的格式化
        function timeFormat(t) {
            var date=new Date(t);
            return util.toDateString(date,'yyyy-MM-dd');
        }

        function sampleFormat(data) {
            return data.sampleName+"("+data.code+")";
        }

        function orderFormat(data) {
            return data.code;
        }

    </script>
    <script type="text/html" id="timeTpl">
        {{timeFormat(d.outdate)}}
    </script>
    <script type="text/html" id="sampleTpl">
        {{sampleFormat(d.sample)}}
    </script>
    <script type="text/html" id="orderTpl">
        {{orderFormat(d.order)}}
    </script>

</div>

<form id="addOrderItem_form" style="display: none" class="layui-form" action="#" method="post">
    <input type="hidden" id="id" name="id"/>
    <input type="hidden" id="order" name="order.id" />
    <input type="hidden" name="order.code">
    <div class="info_form_body">
        <div class="layui-form-item">
            <label class="layui-form-label">产品:</label>
            <div class="layui-input-block">
                <select id="sample" name="sample.id">
                    <c:forEach var="sample" items="${samples}">
                        <option value="${sample.id}">${sample.sampleName}(${sample.code})</option>
                    </c:forEach>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">单价:</label>
            <div class="layui-input-block">
                <input id="price"  type="text"  name="price"  lay-verify="required|number"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">数量:</label>
            <div class="layui-input-block">
                <input id="count"  type="text"  name="count"  lay-verify="required|number"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">总价:</label>
            <div class="layui-input-block">
                <input id="total"  type="text"  name="total"  lay-verify="required|number"  autocomplete="off" class="layui-input" onclick="sumtotal()"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出货日期:</label>
            <div class="layui-input-block">
                <input id="outdate"  type="text"  name="outdate"  lay-verify="date"  autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <textarea id="remark" name="remark" placeholder="备注" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="btn" lay-submit="" lay-filter="check" class="layui-btn"></button>
            </div>
        </div>
    </div>
</form>